import React,{Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    TextInput,
    StatusBar,
    Image,
    TouchableWithoutFeedback,
} from 'react-native';
import request from '../request/request';
import Header from './header/Header';
export default class ChangeNick extends Component{
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
        	nickName: '',
        	show: false
        };
    }

    componentWillMount(){
    	const { params } = this.props.navigation.state;
    	if(params.oldNick){
    		this.setState({
    			show: true,
	        	nickName: params.oldNick
	        });
    	}
    }

    changeText(text){
    	if(text != ''){
    		this.setState({
	    		show: true,
	    		nickName: text,
	    	})
    	}else {
    		this.setState({
	    		show: false,
	    		nickName: '',
	    	})
    	}
    }

    clearAll(){
    	this.setState({
    		show: false,
    		nickName: '',
    	})
    }

    changeNick(){
    	let text = this.state.nickName;
    	text=text.replace(/^\s+|\s+$/g,'');
    	this.setState({
    		nickName: text
    	});
    	if(text){
    		alert('可以提交！')
    	}else {
    		alert('不能为空或全为空格！')
    	}
    }

    render(){
        const { params } = this.props.navigation.state;
        const {navigate,goBack,state} = this.props.navigation;
        let barHeight = StatusBar.currentHeight;
        return (
            <View style={{
                flex: 1,
                // paddingTop: barHeight, 
                backgroundColor: '#eaeaea'
            }}>
                <Header isShowBack={true} title='修改昵称' goBack={goBack} />

				<View style={{backgroundColor: '#fff', height: 34, flexDirection: 'row', justifyContent: 'space-between', alignItems:'center'}}>
					<TextInput
		                style={{
		                	width: '80%',
		                    height: 30,
		                    padding: 0,
		                    paddingLeft: 12,
		                    fontSize: 14,
		                }}
		                value={this.state.nickName}
		                placeholder={'请输入昵称'}
		                placeholderTextColor='#747474'
		                underlineColorAndroid={'transparent'}
		                onChangeText={(text)=>this.changeText(text)}
		            />
		            <TouchableWithoutFeedback onPress={()=>this.clearAll()}>
			            <View style={{width: 20, height: 20, marginRight: 12}}>
			            {
			            	this.state.show?
			            	<Image style={{width: 20, height: 20}} source={require('../images/close.png')}/>
			            	:
			            	null
			            }
			            </View>
		            </TouchableWithoutFeedback>
				</View>
				<View style={{height: 50, marginTop: 150, flexDirection: 'row', justifyContent: 'center'}}>
					<TouchableWithoutFeedback onPress={()=>this.changeNick()}>
						<View style={{
	    					width: 187,height: 42,borderRadius: 20,backgroundColor: '#fff',justifyContent: 'center', alignItems: 'center',
	    					shadowOffset: {width: 0, height: 5},  
					        shadowOpacity: 0.5,  
					        shadowRadius: 8,  
					        shadowColor: '#ebebeb',  
					        //注意：这一句是可以让安卓拥有灰色阴影  
					        elevation: 4, 
	    				}}>
	    					<Text style={{fontSize: 16, color: '#0000ff', textAlign: 'center'}}>确定</Text>
	    				</View>
					</TouchableWithoutFeedback>
				</View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    
})